<!DOCTYPE html><html>
<head>
	<title>PhotoSwipe</title>
	<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<link href="styles.css" type="text/css" rel="stylesheet" />
	
	<link href="../photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="../lib/simple-inheritance.min.js"></script>
	<script type="text/javascript" src="../code-photoswipe-1.0.19.min.js"></script>
	
	
	<script type="text/javascript">
		
		/*
		 This example shows how to listen and respond to gallery events.
		 
		 - onBeforeShow: Just before the gallery is displayed
		 - onShow: When the gallery is displayed
		 - onBeforeHide: Just before the gallery is hidden
		 - onHide: When the gallery is hidden
		 - onShowNext: When the gallery has been issued the command to show the next image
		 - onShowPrevious: When the gallery has been issued the command to show the previous image
		 - onDisplayImage: When the gallery displays an image. Typically fired after onShowNext and onShowPrevious
		 - onResetPosition: When the gallery resets the size and position of itself. Typically fired after device orientation change or window resize
		 - onSlideshowStart: When the gallery has started the slideshow
		 - onSlideshowStop: When the gallery has stopped the slideshow
		 - onBeforeCaptionAndToolbarShow: Just before the caption / toolbar is faded in
		 - onBeforeCaptionAndToolbarHide: Just before the caption / toolbar is faded out
		 
		 */
		 
		document.addEventListener('DOMContentLoaded', function(){
			
			// onBeforeShow
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeShow, function(e){
				
				console.log('onBeforeShow');
				
			});
			
			// onShow
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onShow, function(e){
				
				console.log('onShow');
				
			});
			
			// onBeforeHide
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){
				
				console.log('onBeforeHide');
				
			});
			
			// onHide
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onHide, function(e){
				
				console.log('onHide');
				
			});
			
			// onShowNext
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onShowNext, function(e){
				
				console.log('onShowNext');
				
			});
	
			// onShowPrevious
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){
				
				console.log('onShowPrevious');
				
			});
			
			// onDisplayImage
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onDisplayImage, function(e){
				
				console.log('onDisplayImage');
				
			});
			
			// onResetPosition
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){
				
				console.log('onResetPosition');
				
			});
			
			// onSlideshowStart
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){
				
				console.log('onSlideshowStart');
				
			});
			
			// onSlideshowStop
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){
				
				console.log('onSlideshowStop');
				
			});
			
			// onBeforeCaptionAndToolbarShow
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
				
				console.log('onBeforeCaptionAndToolbarShow');
				
			});
			
			// onBeforeCaptionAndToolbarHide
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
				
				console.log('onBeforeCaptionAndToolbarHide');
				
			});
			
			// onViewportClick
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){
				
				console.log('onViewportClick');
				
			});
			
			// onCaptionAndToolbarShow
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onCaptionAndToolbarShow, function(e){
				
				console.log('onCaptionAndToolbarShow');
				
			});
			
			// onCaptionAndToolbarHide
			Code.PhotoSwipe.Current.addEventHandler(Code.PhotoSwipe.EventTypes.onCaptionAndToolbarHide, function(e){
				
				console.log('onCaptionAndToolbarHide');
				
			});
			
			Code.photoSwipe('a', '#Gallery');
			
		}, false);
		
						
		
	</script>
	
</head>
<body>

<div id="Header">
	<a href="http://www.codecomputerlove.com"><img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" /></a>
</div>

<div id="MainContent">

	<div class="page-content">
		<h1>PhotoSwipe</h1>
	</div>
	
	
	<div id="Gallery">
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></div>
			
			<div class="gallery-item"><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" alt="Image 002" /></a></div>
			
			<div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>
			
		</div>

	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" alt="Image 004" /></a></div>
			
			<div class="gallery-item"><a href="images/full/005.jpg"><img src="images/thumb/005.jpg" alt="Image 005" /></a></div>
			
			<div class="gallery-item"><a href="images/full/006.jpg"><img src="images/thumb/006.jpg" alt="Image 006" /></a></div>
	
		</div>
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/007.jpg"><img src="images/thumb/007.jpg" alt="Image 007" /></a></div>
			
			<div class="gallery-item"><a href="images/full/008.jpg"><img src="images/thumb/008.jpg" alt="Image 008" /></a></div>
			
			<div class="gallery-item"><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" alt="Image 009" /></a></div>

		</div>
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" alt="Image 010" /></a></div>
			
			<div class="gallery-item"><a href="images/full/011.jpg"><img src="images/thumb/011.jpg" alt="Image 011" /></a></div>
			
			<div class="gallery-item"><a href="images/full/012.jpg"><img src="images/thumb/012.jpg" alt="Image 012" /></a></div>
	
		</div>
	
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" alt="Image 013" /></a></div>
			
			<div class="gallery-item"><a href="images/full/014.jpg"><img src="images/thumb/014.jpg" alt="Image 014" /></a></div>
			
			<div class="gallery-item"><a href="images/full/015.jpg"><img src="images/thumb/015.jpg" alt="Image 015" /></a></div>
	
		</div>
		
		<div class="gallery-row">
	
			<div class="gallery-item"><a href="images/full/016.jpg"><img src="images/thumb/016.jpg" alt="Image 016" /></a></div>
			
			<div class="gallery-item"><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" alt="Image 017" /></a></div>
			
			<div class="gallery-item"><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" /></a></div>
	
		</div>
	
	</div>
	
	
</div>	

	
<div id="Footer">
	<p><small>&copy; 2011 Code Computerlove Ltd - new media agency / digital marketing agency</small></p>

	<div id="SocialLinks">
	<a href="http://blog.codecomputerlove.com/"><img src="images/blogicon.png" width="32" height="32" alt="Blog" /></a>
	<a href="http://www.twitter.com/computerlovers"><img src="images/twittericon.png" width="32" height="32" alt="Twitter" /></a>
	<a href="http://www.facebook.com/CodeComputerlove"><img src="images/facebookicon.png" width="32" height="32" alt="Facebook" /></a>
	<a href="http://www.flickr.com/photos/codecomputerlove"><img src="images/flickricon.png" width="32" height="32" alt="Flickr" /></a>
</div>

</body>
</html>